<%--
  Created by IntelliJ IDEA.
  User: 34123
  Date: 2023/07/05 0005
  Time: 下午 03:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="//unpkg.com/layui@2.8.8/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.8.8/dist/layui.js"></script>
</head>
<style>
    .custom-file-upload {
        display: inline-block;
        padding: 10px 20px;
        cursor: pointer;
        background-color: #4CAF50;
        color: white;
        border-radius: 5px;
        border: none;
        transition: background-color 0.3s;
    }

    .custom-file-upload:hover {
        background-color: #45a049;
    }

    .custom-file-upload input[type="file"] {
        display: none;
    }

    .file-selected {
        margin-top: 10px;
        font-weight: bold;
    }
</style>
<body>
<div>
    <form action="#" id="fm">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>申请报销</legend>
        </fieldset>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">费用名称：</label>
                <div class="layui-input-inline"><input type="text" name="feeName" lay-verify="required" class="layui-input "  ></div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">报销日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="reimbursementDate" class="layui-input" id="ID-laydate-demo" placeholder="yyyy-MM-dd">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">报销金额</label>
                <div class="layui-input-inline"><input type="text" name="amountOfReimbursement" lay-verify="required" class="layui-input "  ></div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">收费单位</label>
                <div class="layui-input-inline"><input type="text" name="chargeUnit" lay-verify="required" class="layui-input "  ></div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">报销人</label>
                <div class="layui-input-inline"><input type="text" name="reimbursementApplicant" lay-verify="required" class="layui-input " ></div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">报销部门</label>
                <div class="layui-input-inline">
                    <select name="reimbursementDepartmentId" style="width: 191px" id="reimbursementDepartment" lay-verify="required" class="layui-select">
                        <option value="-1">请选择部门</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">审核人</label>
                <div class="layui-input-inline"><input type="text" name="auditor" lay-verify="required" class="layui-input"  ></div>
            </div>
            <div></div>
           <div style="margin-left: 54px;margin-top: 20px" >
               <span >报价单  &nbsp;&nbsp;</span>
               <label class="custom-file-upload">
                   <input type="file" name="image" accept="image/*" onchange="displayImage(this)">
                   <i class="fa fa-upload"></i> 选择图片
               </label>
               <div id="selected-file" class="file-selected"></div>
               <img id="preview" class="preview-image" style="display: none;">
           </div>
            <fieldset class="layui-elem-field layui-field-title">
                <legend>备注</legend>
            </fieldset>
            <div class="layui-inline">
                <textarea style="width: 300px" name="remark"  placeholder="补充说明" class="layui-textarea"></textarea>
            </div>
        </div>
    </form>
</div>

<div class="layui-input-block">
    <button type="button" onclick="addReimbursementApplication()" class="layui-btn" style="right: 200px" >提交申请</button>
</div>
</body>
<script src="//unpkg.com/layui@2.8.7/dist/layui.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

    layui.use('laydate', function() {
        var laydate = layui.laydate;
        // 执行laydate实例，绑定到报销日期的输入框上
        laydate.render({
            elem: '#ID-laydate-demo',
            format: 'yyyy-MM-dd'
        });
        $.ajax({
            "url": "${pageContext.request.contextPath}/staff/selectStaffDepartment",
            "type": "post",
            "data": {},
            "dataType": "json",
            "success": function(result) {
                let temp = "";
                for (let i in result) {
                    temp += `
                 <option value="\${result[i].id}">\${result[i].staffDepartment}</option>
                `;
                }
                $('#reimbursementDepartment').append(temp);
            },
            "error": function() {
                layer.alert("网络正忙");
            }
        });
    });
</script>

<script>
    function displayImage(input) {
        var selectedFile = document.getElementById('selected-file');
        var previewImage = document.getElementById('preview');
        if (input.files && input.files.length > 0) {
            var file = input.files[0];
            var reader = new FileReader();
            reader.onload = function(e) {
                selectedFile.innerText = '已选择文件: ' + file.name;
                previewImage.src = e.target.result;
                previewImage.style.display = 'block';
            };
            reader.readAsDataURL(file);
        } else {
            selectedFile.innerText = '';
            previewImage.style.display = 'none';
        }
    }
</script>
<script>
    function addReimbursementApplication() {
        var previewImage = document.getElementById('preview');
        var expenseAccountImg = previewImage.getAttribute('src');
        let data = {expenseAccountImg:expenseAccountImg};
        let array = $("#fm").serializeArray();
        for (var i = 0; i < array.length; i++) {
            data[array[i].name] = array[i].value;
        }
        let adminLog = JSON.stringify(data);
        $.ajax({
            "url": "staff/addReimbursementApplicationController", // 要提交的URL路径
            "type": "post", // 发送请求的方式
            "data": adminLog, // 要发送到服务器的数据
            "dataType": "json", // 期望接受的数据格式
            "contentType": "application/json;charset=utf-8",
            "success": function(result) { // 请求成功后要执行的代码
                if (result.code == 200) {
                    alert(result.msg);
                    document.getElementById("fm").submit(); //
                } else if (result.code == 300) {
                    alert(result.msg);
                } else if (result.code == 400) {
                    alert(result.msg);
                } else {
                    alert("意料之外的错误!");
                }
            },
            "error": function() { // 请求失败后要执行的代码
            }
        });
    }
</script>
</html>
